<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Home</title>
    </h:head>
    <h:body>
        Logged user: #{userBean.name}<br/>
        <h:form>
            <p:commandLink action="#{loginBean.logout()}" value="logout"/>
        </h:form>
        <div align="center">

            <h:form styleClass="formCalendar">
                <p:growl id="messages" showDetail="true" />

                <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip">
                    <h:panelGrid id="event" columns="1">
                        <h:outputLabel for="title" value="Title:" />
                        <p:inputText id="title" value="#{calendarBean.event.title}" required="true" />

                        <h:outputLabel for="from" value="From:" />
                        <p:inputMask id="from" value="#{calendarBean.event.startDate}" mask="99/99/9999 - 99:99:99" required="true">
                            <f:convertDateTime pattern="dd/MM/yyyy 'at' HH:mm:ss z " timeZone="GMT+2"/>
                        </p:inputMask>

                        <h:outputLabel for="to" value="To:" />
                        <p:inputMask id="to" value="#{calendarBean.event.endDate}" mask="99/99/9999 - 99:99:99" required="true">
                            <f:convertDateTime pattern="dd/MM/yyyy 'at' HH:mm:ss z" timeZone="GMT+2"/>
                        </p:inputMask>

                        <h:outputLabel for="outdoor" value="Outdoor:" />
                        <h:selectBooleanCheckbox id="outdoor" value="#{calendarBean.event.inOut}" />
                        
                        <h:outputLabel for="privacy" value="Privacy:" />
                        <h:selectBooleanCheckbox id="privacy" value="#{calendarBean.event.privacy}" />
                        
                        <p:commandButton id="editButton" value="Save" actionListener="#{calendarBean.editEvent}" oncomplete="PF('myschedule').update();PF('eventDialog').hide();" />
                    </h:panelGrid>
                </p:dialog>

                <h:panelGrid columnClasses="value">
                    <h:button value="New event" outcome="/user/editevent"/>
                    <p:schedule id="schedule" value="#{calendarBean.eventModel}" widgetVar="myschedule" timeZone="GMT+2" style="width: 800px">

                        <p:ajax event="eventSelect" listener="#{calendarBean.onEventSelect}" update="event" oncomplete="PF('eventDialog').show();"/>


                    </p:schedule>
                </h:panelGrid>
            </h:form>
        </div>
    </h:body>
</html>

